<%@ page import="java.util.ArrayList"%>
<%@ page import="java.util.Iterator"%>
<%@ page import="java.util.List"%>
<%@ page import="model.FitsFile"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ICRAR FITS Image Server</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script>
$(document).ready( function() {
    $(".hidePanel").hide();
	$(".panelName").live('click',function(){
		var id = $(this).attr('id');
		$(".hidePanel").filter("#"+id).toggle();
	});
	$("#showAll").live('click',function(){
		$(".hidePanel").show();
	});
	$("#hideAll").live('click',function(){
		$(".hidePanel").hide();
	});
});
</script>
</head>
<body>
<table width="80%" border="0" align="center" cellpadding="0" cellspacing="0">
  
  <tr>
    <td valign="bottom" bgcolor="#000000" class="header"><table border="0" cellspacing="0" cellpadding="12">
        <tr>
        <td><img src="images/icrar-logo.gif" width="54" height="52" alt="icrar-logo" />ICRAR FITS Server</td>
      </tr>
    </table></td>
    <td align="right" bgcolor="#000000"><img src="images/Scitech-ska-.jpg" alt="" width="573" height="120" /></td>
  </tr>
</table>
<table width="80%" border="0" align="center" cellpadding="0" cellspacing="0" class="nav-background">
  <tr>
    <td><table border="0" cellpadding="8" cellspacing="0">
      <tr>
        <td>&nbsp;</td>
        <td><strong><a href="index.jsp" class="nav-link">Search Images</a></strong></td>
        <td class="nav-link">|</td>
        <td><strong ><a href="jsp/scan.jsp" class="nav-link">Scan Images</a></strong></td>
        <td>&nbsp;</td>
        </tr>
    </table></td>
  </tr>
</table>
<form method="post" action="ZipServlet">
 <table border="0" width="80%" cellpadding="8" cellspacing="0" align="center" >
   <tr>
   	 <td>
   	 <p class="normal"> Click on a file name to view details about the file. <a href="#" id="showAll">Show</a>/<a href="#" id="hideAll">Hide</a> all file details</p>
 
<%  ArrayList<FitsFile> files = (ArrayList<FitsFile>)request.getAttribute("alFFs");
	Iterator<FitsFile> itr = files.iterator();
		int dispId=0;
		while(itr.hasNext()){ 
			dispId++;
			FitsFile file = (FitsFile) itr.next(); %>
            
		<table cellpadding="2" cellspacing="0" border="0">
			<tr>
				<td valign="top"><input type="checkbox" name="option" value="<% out.print(file.getFolder()); %><% out.print(file.getFilename()); %>" /></td>
				<td>
				<table>
				  <tr class="panelName" id="<% out.print(dispId); %>" >
					<td colspan="2"><span class="normal"><b><% out.print(file.getFilename()); %></b></span>
					</td>
				  </tr>
				  <tr>
					<td class="hidePanel" id="<% out.print(dispId); %>" valign="top">
					<span class="normal">
					  <ul>
               			<li>Author: <%  out.print(file.getAuthor());%></li>
               			<li>Telescope: <%  out.print(file.getTelescope()); %></li>
               			<li>Observer: <%  out.print(file.getObserver()); %></li>
               			<li>Equinox: <%  out.print(file.getEquinox()); %></li>
               			<li>Survey: <%  out.print(file.getSurvey()); %></li>
               			
            		  </ul>
            		  </span>
					</td>
					<td class="hidePanel" id="<% out.print(dispId); %>" valign="top">
					 <span class="normal"> 
					  <ul>
               			<li>ctype1: <%  out.print(file.getCtype1()); %></li>
               			<li>ctype2: <%  out.print(file.getCtype2()); %></li>
               			<li>crval1: <%  out.print(file.getCrval1()); %></li>
               			<li>crval2: <%  out.print(file.getCrval2()); %></li>
               		  </ul>
               		  </span>
					</td>
				   </tr>
				</table>	
				</td>
        	</tr>
        </table>  	
		<%}%> 
		</td></tr>

          <tr>
            <td valign="top">
            	<input name="Submit" type="submit" class="text-field" id="button" value="Compress and Download Selected Files" />
            </td>
            <td valign="top">&nbsp;</td>
          </tr>
        </table>
    </form>
</body>
</html>   